<template>
	<view class="index_box">
		<u-navbar :is-back="false" title="高德地图"></u-navbar>
		<!-- 	<map :enable-satellite="isMap" style="width: 100%; height: 100vh;" :latitude="latitude" :longitude="longitude"
			:scale="scale" :markers="markers" :polygons="polygons" @callouttap="onCallouttap"
			@regionchange="onRegionChange"> -->
		<map id='map' ref='map' :longitude='longitude' :latitude='latitude' :markers="markers" :polyline="Polyline"
			:scale='scale' :enable-satellite='enableSatellite' :enable-traffic='enableTraffic' :polygons="polygons"
			:enable-overlooking='true' :enable-rotate='true' @regionchange="onRegionChange" show-location>
			<!-- 	<cover-view class="serach_box">
				<cover-view class="serach_item" @click="serachClick">搜索地点</cover-view>
			</cover-view> -->
		</map>
		<view class="icon_box">
			<view class="location_box">
				<u-icon name="search" size="40" @click="serachClick"></u-icon>
			</view>
			<view class="layer_box" @click="">
				<i class="iconfont icon-tuceng" @click='changeLayer'></i>
			</view>
			<!-- 2/3d -->
			<!-- 	<view class="d_box" @click="changeThreeD">
				<view v-if="showxD">3D</view>
				<view v-else>2D</view>
			</view> -->
			<view class="scale_box">
				<i class="iconfont icon-fangda" @click='zoomInMap'></i>
				<i class="iconfont icon-suoxiao" @click='zoomOutMap'></i>
			</view>
			<view class="location_box">
				<u-icon name="photo" size="40" @click="onphoto"></u-icon>
			</view>
			<view class="location_box">
				<i class="iconfont icon-dingwei" @click='locateMap'></i>
			</view>

			<!-- <view class="route_box">
				<i class="iconfont icon-xiangshang" @click='goRoutePage'></i>
			</view> -->
			<!-- 	<view class="route_box">
				<view class="addbutton" @click="mapTap">
					添加点
				</view>
			</view> -->
		</view>
		<u-popup v-model="showLayer" mode="bottom" height='500' :closeable='true'>
			<view class="layer_content">
				<view :class="clickItem==1?'click_layer_item':'layer_item'" @click="selectNormal">
					标准地图
				</view>
				<view :class="clickItem==2?'click_layer_item':'layer_item'" @click="selectSatellite">
					卫星地图
				</view>
				<view :class="clickItem==3?'click_layer_item':'layer_item'" @click='selectRoad'>
					路况地图
				</view>
			</view>
		</u-popup>
		<view class="center">
			<u-icon name="map" color="#2979ff" size="60"></u-icon>
		</view>
		<view class="btnmap way" @click="wayall">路径生成</view>
		<view class="btnmap close" @click="closeWayall">关闭路径</view>
		<view class="buttom-bg">
			<view class="bottom">
				{{addtext}}
			</view>

		</view>
		<view class="bottom-buttom">
			<view class="bottom-box">
				<view class="box-img" @click="openpop">
					<img src="" alt="" class="icon-img" />
					<view class="">
						小区基础信息
					</view>
				</view>
				<view class="box-item" @click="mapTap">
					<u-icon name="map" size="60"></u-icon>
					<view class="">
						定位
					</view>
				</view>
				<view class="box-item" @click="onrevoke">
					<u-icon name="arrow-left" size="60"></u-icon>
					<view class="">
						撤销
					</view>
				</view>
				<view class="box-item" @click="delectico">
					<u-icon name="reload" size="60"></u-icon>
					<view class="">
						重置
					</view>
				</view>
				<view class="box-item" @click="complete">
					<u-icon name="checkmark" size="60"></u-icon>
					<view class="">
						完成
					</view>
				</view>
			</view>

		</view>
		<u-popup v-model="showpop" mode="bottom" height='500' :round="10" :closeable='true'>
			<view class="pop-center">
				<view class="pop-title">
					选择要素类别
				</view>
				<view class="pop-all">
					<view class="pop-box" v-for="(item,index) in 8" :key="index" @click="ondian(item)">
						<img src="" alt="" class="popimg" />
						<view class="poptext">
							外立面
						</view>
						<view class="leaber">
							点
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="showphoto" mode="bottom" height='400' :round="10" :closeable='true' @close='closephoto'>
			<view class="pop-center">
				<view class="pop-title">
					拍照上传品质
				</view>
				<view class="pop-all">
					<u-radio-group v-model="value" @change="radioGroupChange" wrap wrap="true">
						<u-radio @change="radioChange" v-for="(item, index) in list" :key="index" :name="item.name"
							:disabled="item.disabled">
							{{item.name}}
						</u-radio>
					</u-radio-group>

				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import amap from '../../common/amap-wx.js';
	import {
		key
	} from '../../common/map-key.js';
	import '@/static/iconfont/iconfont.css'

	export default {
		data() {
			return {
				list: [{
						name: '效率优先 :智能压缩照片体积，快速上传和浏览照片',
						disabled: false
					},
					{
						name: '原图品质:拍照无损上传，请确保手机网速稳定，可能消耗较多流量',
						disabled: false
					},

				],
				value: 'orange',
				showpop: false,
				showphoto: false,
				option: [],
				id: 0,
				longitude: '',
				latitude: '',
				amapPlugin: null,
				desc: '',
				markers: [{
					id: 0,
					latitude: '',
					longitude: '',
					width: 25,
					height: 35,
					callout: { // 气泡
						content: "当前点",
						// bgColor: "rgba(255,255,255,0.51)",
						color: "#F56C6C",
						fontSize: 12,
						padding: 5,
						display: "ALWAYS",
						borderColor: "#F56C6C",
					},
				}],
				Polyline: [{
					points: [{
						longitude: 113.3245211,
						latitude: 23.10229
					}, {
						longitude: 113.324520,
						latitude: 23.21229
					}],
					color: "#FF0000",
					width: 5,
					arrowLine: true,
				}, ],
				myPosition: {
					position: '',
					addressName: ''
				},
				polygons: [{ // 路线
					strokeWidth: 1,
					strokeColor: '#67c23a',
					fillColor: '#1791fc66',
					dottedLine: false,
					arrowLine: false,
					level: "abovelabels",
					// 必须要有三个默认属性，并且值不能完全一致，不然报错
					points: [{
						latitude: 30.627291,
						longitude: 114.343762
					}, {
						latitude: 30.627292,
						longitude: 114.343763,
					}, {
						latitude: 30.627291,
						longitude: 114.343762
					}]
				}],
				addtext: '',
				add: false,
				newlatitude: '',
				newlongitude: '',
				scale: 16,
				map: null,
				enableSatellite: false, //开启卫星地图
				enableTraffic: false, //开启实时路况
				showLayer: false, //图层弹出层
				clickItem: 1
			}
		},
		onLoad() {
			this.amapPlugin = new amap.AMapWX({
				key: key
			});
			// this.getMyLocation()
			this.getRegeo()
		},
		onReady() {
			this.map = uni.createMapContext("map", this);
		},
		methods: {
			closephoto() {

				console.log(this.value, '选中项')
			},
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				// console.log(e);
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// console.log(e);
			},
			onphoto() {
				this.showphoto = true
			},
			ondian(data) {
				console.log(data, '选中项')
				this.showpop = false
			},
			openpop() {
				console.log('点击弹窗')
				this.showpop = true
			},
			close() {
				this.showpop = false
				// console.log('close');
			},
			complete() {
				console.log(this.markers, '完成')
				var jsonString = JSON.stringify(this.markers);
				console.log(this.markers, '完成')

			},
			onrevoke() {
				console.log(this.markers, '撤销')
				this.markers.pop()
				this.id=this.markers.length-1
				console.log(this.markers, '撤销后');
			},
			delectico() {
				console.log(this.markers, '删除点')
				this.markers = []
				this.id = 0
				this.closeWayall()
			},
			closeWayall() {
				this.polygons[0].points = []
				this.Polyline[0].points = [];
			},
			wayall() {
				console.log(this.option)
				// 点线面，如果不是面就不让他生成
				if (this.option.length == 2) {
					console.log(this.Polyline, '得到的数值22');
					this.Polyline[0].points = [];
					this.Polyline[0].points.push(...this.option)
					console.log(this.Polyline, '得到的数值22');
				} else if (this.option.length > 2) {
					this.polygons[0].points = [];
					this.polygons[0].points.push(...this.option)
					this.Polyline[0].points = [];
					console.log(this.polygons, '得到的数值');
				} else {
					uni.showToast({
						title: "起码选择三个点",
						duration: 2000
					})
				}
			},
			mapTap({
				detail: {
					latitude,
					longitude
				}
			}) {
				if (this.add) {
					console.log(latitude, longitude, '点击点')
					// this.popupShow = true
					this.option = {
						id: ++this.id,
						latitude: this.newlatitude,
						longitude: this.newlongitude,
						width: 25,
						height: 35,
						callout: {
							content: `点${this.id}`,
							color: "#F56C6C",
							fontSize: 12,
							padding: 5,
							display: "ALWAYS",
							borderColor: "#F56C6C",
						}
					}
					console.log(this.option, '点击点')
					let arr = []
					this.markers.push(this.option)
					this.markers.forEach(item => {
						arr.push({
							latitude: item.latitude,
							longitude: item.longitude
						})
					})
					this.add = false
					this.option = arr;
				} else {
					uni.showToast({
						title: "清先移动地图",
						duration: 2000
					})
				}
				// console.log(this.polygons, '地图画线');
			},
			//初始化地图,获取当前所在位置
			//法1,type: 'gcj02',altitude: true,更准确
			//不返回当前位置名字
			getMyLocation() {
				uni.showLoading({
					title: '获取信息中'
				});
				let _this = this
				uni.getLocation({
					// type: 'gcj02',
					type: 'gcj02',
					altitude: true,
					success: (res) => {
						console.log(res, '返回值')
						_this.myPosition.position = [res.longitude, res.latitude].join(',')
						_this.longitude = res.longitude
						_this.latitude = res.latitude
						_this.$store.commit('setOriginLng', res.longitude);
						_this.$store.commit('setOriginLat', res.latitude);
						uni.hideLoading();
					},
					fail: function(err) {
						console.error('获取位置信息失败：', err);
						// 获取失败时的处理
					}
				})
			},
			onRegionChange(e) {
				if (e.type === 'end' || e.causedBy === 'drag') { // 判断是拖动结束还是缩放结束
					// this.longitude = e.center.longitude; // 获取新的经度
					// this.latitude = e.center.latitude; // 获取新的纬度
					this.add = true
					console.log('新中心点坐标:', e.target.centerLocation.latitude, e.target.centerLocation.longitude, );
					this.newlatitude = e.target.centerLocation.latitude
					this.newlongitude = e.target.centerLocation.longitude
					// this.longitude = e.target.centerLocation.longitude
					// this.latitude = e.target.centerLocation.latitude
					this.getRegeo2()
					console.log(this.amapPlugin, 'ssss')
				}
			},

			//法2
			getRegeo() {
				uni.showLoading({
					title: '获取信息中'
				});
				this.amapPlugin.getRegeo({
					success: (data) => {
						console.log(data, '获取到的信息')
						this.addtext = data[0].regeocodeData.formatted_address
						this.myPosition.position = [data[0].longitude, data[0].latitude].join(',')
						this.longitude = data[0].longitude;
						this.latitude = data[0].latitude;
						// this.markers[0].latitude = this.latitude
						// this.markers[0].longitude = this.longitude
						// this.markers.push({
						// 	id: data[0].id,
						// 	latitude: data[0].latitude,
						// 	longitude: data[0].longitude,
						// 	width: 60,
						// 	height: 80,
						// 	label: {
						// 		content: data[0].regeocodeData.formatted_address,
						// 		color: '#000000'
						// 	}
						// })
						// this.delectico()
						this.locateMap()
						setTimeout(() => {
							this.addmarks()
						}, 1000);


						this.$store.commit('setOrigin', data[0].name);
						this.$store.commit('setOriginLng', data[0].longitude);
						this.$store.commit('setOriginLat', data[0].latitude);
						//this.$store.commit('setCity', data[0].regeocodeData.addressComponent.city);

						uni.setStorageSync('originInfo', data[0])
						uni.setStorageSync('city', data[0].regeocodeData.addressComponent.city)
						uni.hideLoading();
					},
					fail: function(err) {
						console.log(err.errMsg)
					}
				});
			},
			addmarks() {
				this.locateMap()
				setTimeout(() => {
					this.markers[0].latitude = this.newlatitude
					this.markers[0].longitude = this.newlongitude
				}, 1000);

			},
			//搜索点击事件
			serachClick() {
				// uni.navigateTo({
				// 	url: '/pages/search_address/search_address'
				// })
				this.getRegeo3()
			},
			getRegeo2() {
				let _this = this
				_this.amapPlugin.getRegeo({
					success: (data) => {
						console.log(data, '逆地址解析')
						this.addtext = data[0].regeocodeData.formatted_address
					},
					fail: function(err) {
						console.log(err.errMsg)
					},
					location: this.newlongitude + ',' + this.newlatitude, // 例如 '116.397428,39.904989'
				});
			},

			getRegeo3() {
				let _this = this
				_this.amapPlugin.getRegeo({
					success: (data) => {
						uni.chooseLocation({
							success: function(data) {
								console.log(data, '什么万一')
								_this.addtext = data.name
								_this.longitude = data.longitude;
								_this.latitude = data.latitude;
								_this.newlongitude = data.longitude
								_this.newlatitude = data.latitude
								// _this.showGoTO = true
								// _this.title = res.name
								// _this.addressName = _this.ellipsis(res.name, 14)
								// _this.addressDesc = _this.ellipsis(res.address, 18)

								// _this.markers.push({
								// 	id: 2,
								// 	latitude: res.latitude,
								// 	longitude: res.longitude,
								// 	width: 20,
								// 	height: 30
								// });

							}
						});

					},
					fail: function(err) {
						console.log(err.errMsg)
					}
				});
			},


			//放大事件
			zoomInMap() {
				if (this.scale <= 20) {
					this.scale = this.scale + 1
				}
			},
			//缩小事件
			zoomOutMap() {
				if (this.scale >= 3) {
					this.scale = this.scale - 1
				}
			},
			//定位事件,需要设置show-location
			locateMap() {
				this.scale = 16
				this.map.moveToLocation()
			},
			//去路线规划页面
			goRoutePage() {
				uni.navigateTo({
					url: '/pages/route/route'
				})
				uni.setStorageSync('search_type', 'go_route')
			},



			//更改图层
			changeLayer() {
				this.showLayer = true
			},
			selectNormal() {
				this.clickItem = 1
				this.enableSatellite = false
				this.enableTraffic = false
			},
			selectSatellite() {
				this.clickItem = 2
				this.enableSatellite = true
				this.enableTraffic = false
			},
			selectRoad() {
				this.clickItem = 3
				this.enableTraffic = true
				this.enableSatellite = false
			}
		},
	}
</script>

<style scoped lang="less">
	.pop-center {
		padding: 20rpx;

		.pop-title {}

		.pop-all {
			padding-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			flex-wrap: wrap;

			.pop-box {
				position: relative;
				margin-top: 10rpx;
				text-align: center;
				width: 150rpx;
				padding: 10rpx;
				border-radius: 10rpx;
				border: 1rpx solid #888888;

				.popimg {
					width: 80rpx;
					height: 80rpx;
					background-color: black;
					border-radius: 50%;
				}

				.leaber {
					position: absolute;
					top: 0;
					left: 0;
					background-color: #E6F6F5;
					color: #03A489;
				}

				.poptext {}

			}
		}
	}

	.buttom-bg {
		width: 100%;
		padding: 20rpx;
		position: absolute;
		bottom: 200rpx;

		.bottom {
			padding-left: 10rpx;
			padding-right: 10rpx;
			display: flex;
			justify-content: center;
			/* 水平居中 */
			align-items: center;
			/* 垂直居中 */
			height: 100rpx;
			/* 容器高度 */
			overflow: hidden;
			/* 防止内容溢出 */
			white-space: normal;
			/* 允许换行 */
			color: #ffffff;
			font-size: 28rpx;
			// line-height: 80rpx;
			width: 100%;
			border-radius: 20rpx;
			background-color: rgba(0, 0, 0, 0.5);
		}

	}

	.bottom-buttom {
		width: 100%;
		padding: 20rpx;
		position: absolute;
		bottom: 0rpx;
		background-color: #fff;

		.bottom-box {
			display: flex;
			width: 100%;
			align-items: center;
			height: 150rpx;
			justify-content: space-around;

			.box-img {
				width: 100rpx;
				height: 180rpx;
				border-right: 1rpx solid #888888;

				.icon-img {
					width: 80rpx;
					height: 80rpx;
					background-color: black;
					border-radius: 50%;
				}
			}

			.box-item {}
		}
	}

	.btnmap {
		position: fixed;
		top: 100px;
		right: 20px;
		width: 110px;
		height: 30px;
		color: #92bbea;
		text-align: center;
		line-height: 30px;
		border: 1px solid #92bbea;
		background-color: #fff;
	}

	.way {
		right: 140px;
	}

	.close {
		right: 260px;
	}

	.add {
		right: 20px;
	}

	.center {
		position: fixed;
		left: 45%;
		top: 51%;
		width: 25px;
		height: 25px;
		border-radius: 50%;
	}

	.index_box {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		position: relative;
	}

	#map {
		width: 100%;
		flex: 1;
	}

	.icon_box {
		position: absolute;
		top: 15vh;
		// bottom: 10vh;
		right: 50rpx;
	}

	.icon_box>view {
		margin-bottom: 20rpx;
	}

	.serach_box {
		width: 100vw;
		margin: 40rpx auto;

		.serach_item {
			width: 90vw;
			height: 100rpx;
			line-height: 100rpx;
			border-radius: 20rpx;
			margin: 0 auto;
			color: #85888d;
			background-color: #ffffff;
			padding-left: 20rpx;
		}
	}

	.scale_box {
		padding: 10rpx;
		border-radius: 50rpx;
		box-shadow: 0 8px 19px 0 rgba(21, 24, 56, 0.09);
		background-color: #ffffff;
		display: flex;
		flex-direction: column;

		.icon-fangda,
		.icon-suoxiao {
			font-size: 60rpx;
			cursor: pointer;
			-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		}
	}

	.location_box {
		text-align: center;
		padding: 10rpx;
		border-radius: 50rpx;
		box-shadow: 0 8px 19px 0 rgba(21, 24, 56, 0.09);
		background-color: #ffffff;

		.icon-dingwei {
			font-size: 60rpx;
		}
	}

	.route_box {
		padding: 10rpx 0;
		border-radius: 10rpx;

		background-color: #ffffff;
		box-shadow: 0 8px 19px 0 rgba(21, 24, 56, 0.09);

		.icon-xiangshang {
			font-size: 80rpx;
			color: #4B77FA;
		}

		.addbutton {
			color: #92bbea;
			text-align: center;
			padding: 5rpx;
			// line-height: 30px;
			border-radius: 30rpx;
			// border: 1px solid #92bbea;
			background-color: #fff;
		}
	}

	.d_box,
	.layer_box {
		width: 80rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		background-color: #ffffff;
		color: #4E79F7;
		border-radius: 40rpx;
		font-size: 28rpx;
		font-weight: bold;
		box-shadow: 0 8px 19px 0 rgba(21, 24, 56, 0.09);
		overflow: hidden;
	}

	.icon-tuceng {
		font-size: 40rpx;
	}

	.layer_content {
		padding-top: 100rpx;
		display: flex;
		justify-content: space-around;

		.layer_item {
			border: solid 2rpx #f2f1ed;
			padding: 20rpx;
			border-radius: 10rpx;
		}

		.click_layer_item {
			border: solid 2rpx #4B77FA;
			padding: 20rpx;
			border-radius: 10rpx;
		}
	}
</style>